import React, {Component} from 'react'
import './index.less'
import IconInfo from 'components/common/iconInfo'
import PostContent from './postContent'
import PropTypes from 'prop-types'
import { observer } from 'mobx-react/custom'

@observer
export default class PostItem extends Component {
  // 点赞
  like (postData) {
    if (postData.CanPoint === 0) return
    this.props.onClickLike && this.props.onClickLike(postData)
  }

  more (postData) {
    this.props.onClickMore && this.props.onClickMore(postData)
  }
  comment (postData) {
    this.props.onClickComment && this.props.onClickComment(postData)
  }
  clickItem (postData) {
    this.props.onClickItem && this.props.onClickItem(postData)
  }

  render () {
    const { data } = this.props.vm
    return (
      <div className='post-box'>
        <IconInfo
          iconInfo={{icon: data.Headimgurl,
            username: data.Nickname,
            commentDate: data.CreateTime}}>
          <div className='flex-1'>
            <div className='reading-quantity'>{data.ReadingNumber}</div>
          </div>
        </IconInfo>
        <PostContent data={data}
          onClickItem={this.clickItem.bind(this, data)}
          />
        <div className='Interaction-box'>
          <p onClick={this.comment.bind(this, data)} className='discuss'>
            <img src={require('images/discuss.png')} alt='' />
            <span>{data.CommentriosNumber}</span>
          </p>
          <p onClick={this.like.bind(this, data)} className='thumbs'>
            <img src={data.CanPoint === 1 ? require('images/thumbs.png') : require('images/thumbs-select.png')} alt='' />
            <span>{data.PointNumber}</span>
          </p>
          <p onClick={this.more.bind(this, data)} className='more'>
            <img src={require('images/more.png')} alt='' />
          </p>
        </div>
      </div>
    )
  }
}

PostItem.propTypes = {
  postData: PropTypes.object,
  onClickMore: PropTypes.func,
  onClickComment: PropTypes.func,
  onClickItem: PropTypes.func
}
